<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <style>
        .d1 p{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="d1">
        <p id="p1">段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <div>
        <input id="username" data-id="1000" type="text">
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <input type="button" value="按钮4">
        <input type="button" value="按钮5">
    </div>
    <div>
        <input type="button" value="全选/取消">
        <input type="checkbox" ><label>Javascript</label>
        <input type="checkbox" ><label>HTML</label>
        <input type="checkbox" ><label>CSS</label>
    </div>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        let p1 = document.getElementById("p1");
        // console.log(p1.innerHTML);

        // console.log($("#p1").html());
        // console.log($("#p1")[0].innerHTML);
        $(p1).html("修改段落1");

        // $("p:even").css({backgroundColor:"yellow"});

        $("p:eq(2)").css({color:"red"});

        $("p:contains(段落4)").css({fontSize:"30px"});

        window.onload = function(){
            console.log("onload1");
        }
        window.onload = function(){
            console.log("onload2");
        }
        $(function(){
            console.log("ready1");
        })
        $(function(){
            console.log("ready2");
            $("[value=按钮1]").on("click",function(e){
                console.log(this,$(this),e);
                e.preventDefault();
            });
            $("[value=按钮2]").click(function(){
                console.log(this);
            });
            $("[value=按钮3]").click(function(){
                // console.log($(".d1").html());
                // $(".d1").html($(".d1").html() + "<h1>标题</h1>");
                // console.log($(".d1").text());
                // $(".d1").text("<h1>标题</h1>");
                console.log($("#username").val());
                $("#username").val("张三");

                
                
            });
            $("[value=按钮4]").click(function(){
                // JQuery操作属性的方法：attr、prop
                // attr：操作一般属性或者自定义属性
                // prop：特殊属性的操作
                // console.log($("#username").attr("data-id"));
                $("#username").attr("data-id","2000")
            });
            let flag = false;
            $("[value='全选/取消']").click(function(){
                flag = !flag;
                $(":checkbox").prop("checked",flag);
            });
            $("[value=按钮5]").click(function(){
                console.log($(".d1 p").css("backgroundColor"));
                // $(".d1 p").css("backgroundColor","green")
                $(".d1 p").css({
                    backgroundColor:"green",
                    fontSize:"30px",
                    border:"1px solid red"
                })
            });
        })
    </script>
</body>
</html>